<template>
	<div style="width: 100%">
    <div v-for="i in ApplyMaterialInfoList">
      <div>{{i.materialName}}</div>
      <div style="display: flex;flex-wrap: wrap" v-if="i.fileType==1">
        <img @click="showBigPic(x.url)" class="mimg" v-for="x in i.fileRespVOList" :src="x.url" alt="">
        <div style="padding: 10px" v-if="i.fileRespVOList.length === 0">未上传</div>
      </div>
      <div style="width: 100%" v-if="i.fileType==2">
        <div class="link" v-for="x in i.fileRespVOList">
          <div class="fileName">{{x.fileName}}</div>
          <a :href="x.url" download>下载</a>
        </div>
        <div style="padding: 10px" v-if="i.fileRespVOList.length === 0">未上传</div>
      </div>
    </div>
	</div>
</template>
<script>
import { Button, Dialog, ImagePreview } from 'vant'
    export default {
        props: {
            value: {
              type: Array,
    			    default: () => []
    		    }
    	},
        components: {
            [Button.name]: Button,
            [Dialog.Component.name]: Dialog.Component,
            [ImagePreview.Component.name]: ImagePreview.Component,
        },
		data() {
			return {
        ApplyMaterialInfoList: []
			}
		},
		computed: {
			showDealDia: {
				get() {
					return this.value
				},
				set(val) {
					return val
				}
			}
		},
		methods: {
      handleOk() {
          this.$emit('ok')
          this.$emit('change', false)
      },
      handleCancel() {
        this.$emit('change', false)
      },
      showBigPic(url) {
        ImagePreview([url]);
      }
		},
		mounted() {
      console.log(this.value)
      this.ApplyMaterialInfoList = [...this.value]
      this.$forceUpdate()
    },
    model: {
      prop: 'value',
      event: 'change'
    }
	}
</script>
<style lang="less" scoped>
.mimg {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  margin: 6px 6px 6px 0;
}
.link {
  font-size: 13px;
  display: flex;
  padding: 10px 0;
  align-items: center;
  .fileName {
    color: #2A83EF;
    flex: 1;
    margin-right: 10px;
    text-decoration: underline;
  }
  a {
    color: #2A83EF;
  }
}
</style>
